<template>
  <div class="backend">
    <header class="backend-header">
      <div class="backend-header-left">
        <div class="logo">
          <img src="../asset/Logo.png" />
        </div>
        <div class="logo-title">智慧物业管理系统</div>
      </div>
      <div class="backend-header-right">
        <div class="right-message">
          <img src="../asset/message.png" alt="" />
        </div>

        <div class="right-center">
          <div class="right-message">
            <img src="../asset/trigger.jpg" alt="" />
          </div>
          <div class="right-center-name">
            <el-dropdown trigger="click" palcement="bottom-start">
              <span style="color: white">Trigger</span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="toLogin"> 退出 </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </header>
    <main class="backend-content">
      <SideBar />
    </main>
  </div>
</template>

<script setup>
import SideBar from "../component/Sidebar.vue";
import router from "@/router";

const toLogin = () => {
  router.push("/login");
}
</script>

<style lang="less" scoped>
.backend {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;

  .backend-header {
    flex-basis: 5rem;
    width: 100vw;
    background-color: #151515;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 左右对齐 */
    .backend-header-left {
      display: flex;
      align-items: center; /* 垂直居中 */
      font-size: 2rem;

      .logo {
        width: 3rem;
        margin-left: 2rem;

        img {
          height: 100%;
          width: 100%;
        }
      }

      .logo-title {
        color: #fefdfd;
        margin-left: 1rem; /* 与 logo 之间留一些间距 */
      }
      .right-center-name {
        margin-left: 1rem; /* 文字与图片之间的间距 */
      }
    }

    .backend-header-right {
      display: flex;
      align-items: center; /* 垂直居中 */
      color: #fdfdfd;
      margin-right: 4rem;

      .right-message {
        width: 2.5rem;
        height: 2.5rem;
        cursor: pointer;
        margin-right: 1rem;
        img {
          height: 100%;
          width: 100%;
        }
      }

      .right-center {
        display: flex;
        align-items: center;
        font-size: 1.5rem;
      }
    }
  }
  .backend-content {
    flex-grow: 1;
    overflow: auto;
  }
}
</style>
